<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>About Us</title>
  <style>
    body {
      font: 12pt Verdana, Arial, Georgia, sans-serif;
    }

    nav {
      float: left;
      margin: 85px 0 0 0;
      width: 400px;
      border-color: #628794;
      border: thin solid black;
    }

    nav ul {
      display: inline;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    nav li {
      display: inline;
      line-height: 1.8em;
    }

    nav ul a:link,
    nav li a:visited {
      padding: 7px 10 7px 10px;
      background-color: #628794;
      color: #fff;
      font-size: 10pt;
      font-weight: bold;
    }

    nav li a:hover,
    nav li a:active {
      background-color: #6cac46;
      color: #000;
    }

    section {
      float: left;
      width: auto;
      clear: left;
    }

    section a {
      text-decoration: none;
      font-weight: bold;
    }

    nav a {
      position: relative;
      z-index: 24;
    }

    nav a:hover {
      z-index: 25;
    }

    nav a span {
      display: none;
    }

    nav a:hover span {
      position: absolute;
      top: -35px;
      display: block;
      width: 300px;
      color: #ff0000;
      line-height: 1em;
    }
  </style>
</head>
<body>
  <header>
    <div id="logo"><img src="acmewidgets.jpg" alt="ACME Widgets LLC" /></div>
    <nav>
      <ul>
        <li>
          <a href="a">Mission <span>We are pretty great.</span></a>
        </li>
        <li>
          <a href="a">History <span>Out products are the best.</span></a>
        </li>
        <li>
          <a href="a">Execute Team
            <span>
              It is unlikely you will need support, but we provide it anyway.
            </span>
          </a>
        </li>
        <li>
          <a href="a">Contanct Us <span>We are pretty great.</span></a>
        </li>
      </ul>
    </nav>
  </header>
  <section>
    <p>
      <strong>ACME Widgets LLC</strong> is the greatest widget-maker in all
      the land.
    </p>
    <p>Dont't belive us? Read on ...</p>
    <ul>
      <li><a href="#">Mission</a>: Lean about on our corporate</li>
      <li><a href="#">History</a>: Read about our corporate history</li>
      <li><a href="#">Executive Team</a>: OUr team of executives makes</li>
      <li><a href="#">Contact Us</a>: Here you can find multiple</li>
    </ul>
  </section>
  <h1 onclick="this.style.olor='red'">I tun red when clicked.</h1>
</body>
</html>
